<script setup lang="ts">
import useSystemStore from '@/store/modules/system'
import { storeToRefs } from 'pinia';
import {formatUtc} from '@/utils/format-time'

const emit = defineEmits(["newClick", "editClick"])

const systemStore = useSystemStore()
// systemStore.postUsersListAction()
const currentPage = ref(1)
const pageSize = ref(10)
// fetchUserListData()
const {usersList, usersTotalCount} = storeToRefs(systemStore)
// 分页逻辑
const handleSizeChange = () =>{
  fetchUserListData()
}
const handleCurrentChange = () => {
  fetchUserListData()
}
// 发送网络请求
const fetchUserListData = (formData:any = {}) => {
  const size = pageSize.value
  const offset = (currentPage.value -1) * size
  const pageInfo = {size, offset}
  const queryInfo = {...pageInfo, ...formData}
  // console.log(queryInfo)
  systemStore.postUsersListAction(queryInfo)
}
fetchUserListData()
const handleDeleteClick = (id:number) => {
  systemStore.deleteUserByIdActition(id)
}
const handleCreateClick = () => {
  emit("newClick")
}
const handleEditClick = (itemData:any) => {
  emit("editClick", itemData)
}
defineExpose({fetchUserListData})
</script>

<template>
  <div class="content">
      <div class="header">
        <h3 class="title">用户列表</h3>
        <el-button type="primary" @click="handleCreateClick">新建用户</el-button>
      </div>
      <div class="table">
        <el-table :data="usersList" border style="width:100%" >
          <el-table-column align="center" type="selection" width="50px" />
          <el-table-column align="center" type="index" label="序号" width="60px" />
          <el-table-column align="center" label="用户名" prop="name" width="160px" />
          <el-table-column align="center" label="真实姓名" prop="realname" />
          <el-table-column align="center" label="手机号码" prop="cellphone" />
          <el-table-column align="center" label="状态" prop="enable" width="100px">
            <!-- 作用域插槽 -->
            <template #default="scope">
              <el-button size="small" :type="scope.row.enable ? 'primary' : 'danger'" plain>
                {{ scope.row.enable ? '启用':'禁用' }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createAt">
            <template #default="scope">
              {{ formatUtc(scope.row.createAt) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="更新时间" prop="updateAt">
            <template #default="scope">
              {{ formatUtc(scope.row.updateAt) }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="160px">
            <template #default="scope">
              <el-button @click="handleEditClick(scope.row)" size="small" icon="Edit" type="primary" text>编辑</el-button>
              <el-button @click="handleDeleteClick(scope.row.id)" size="small" icon="Delete" type="danger" text>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10,20,30]"
          small="small"
          layout="sizes,prev,pager,next,jumper,total"
          :total="usersTotalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
</template>

<style scoped>
.content {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .title {
    font-size: 20px;
  }
}
.table {
  :deep(.el-table__cell) {
    padding: 12px 0;
  }
  .el-button {
    margin-left: 0;
    padding: 5px 8px;
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>